<template>
  <pageContainer class="contentRole">
    <template slot="header">
      <div class="title">
        <i class="line"></i>
        <p class="text">查询条件</p>
      </div>
      <div class="search">
         <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" class="demo-form-inline">
          <el-form-item label="系统模块" prop="title">
            <el-input
              v-model="queryParams.title"
              placeholder="请输入系统模块"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="操作人员" prop="operName">
            <el-input
              v-model="queryParams.operName"
              placeholder="请输入操作人员"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="类型" prop="businessType">
            <el-select
              v-model="queryParams.businessType"
              placeholder="操作类型"
              clearable
              size="small"
            >
              <el-option
                v-for="dict in dict.type.sys_oper_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryParams.status"
              placeholder="操作状态"
              clearable
              size="small"
            >
              <el-option
                v-for="dict in dict.type.sys_common_status1"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="操作时间">
            <el-date-picker
              v-model="dateRange"
              size="small"
              value-format="yyyy-MM-dd"
              type="daterange"
              style="width:260px"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini"  @click="handleQuery">查询</el-button>
            <el-button type="primary" size="mini"  @click="resetQuery">重置</el-button>
              <el-button
                type="primary"
                size="mini"
                @click="handleExport"
                v-hasPermi="['monitor:operlog:export']"
              >导出</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <template slot="center">
      <div class="title">
        <i class="line"></i>
        <p class="text">列表</p>
      </div>
      <div class="table" ref="table">
        <el-table
          :data="list"
          ref="tables"
          :max-height="maxHeight"
          :header-cell-style="{textAlign: 'center',color: '#fff',backgroundColor: '#223450'}"

          style="width: 100%">
          <!-- <el-table-column type="selection" width="55" align="center" /> -->
          <el-table-column
            type="index"
            align="center"
            width="100"
            label="序号">
          </el-table-column>
          <el-table-column label="日志编号" align="center" prop="operId" />
          <el-table-column label="系统模块" align="center" prop="title" />
          <el-table-column label="操作类型" align="center" prop="businessType">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_oper_type" :value="scope.row.businessType"/>
            </template>
          </el-table-column>
          <el-table-column label="请求方式" align="center" prop="requestMethod" />
          <el-table-column label="操作人员" align="center" prop="operName" width="100" :show-overflow-tooltip="true" />
          <el-table-column label="操作地址" align="center" prop="operIp" width="130" :show-overflow-tooltip="true" />
          <el-table-column label="操作地点" align="center" prop="operLocation" :show-overflow-tooltip="true" />
          <el-table-column label="操作状态" align="center" prop="status">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status"/>
            </template>
          </el-table-column>
          <el-table-column label="操作日期" align="center" prop="operTime" sortable="custom" :sort-orders="['descending', 'ascending']" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.operTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleView(scope.row,scope.index)"
                v-hasPermi="['monitor:operlog:query']"
              >详细</el-button>
              <el-button
                size="mini"
                style="color:red"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
                v-hasPermi="['monitor:operlog:remove']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <template slot="bottom">
       <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <!-- 操作日志详细 -->
    <el-dialog title="操作日志详细" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="form" :model="form" label-width="100px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="操作模块：">{{ form.title }} / {{ typeFormat(form) }}</el-form-item>
            <el-form-item
              label="登录信息："
            >{{ form.operName }} / {{ form.operIp }} / {{ form.operLocation }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求地址：">{{ form.operUrl }}</el-form-item>
            <el-form-item label="请求方式：">{{ form.requestMethod }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="操作方法：">{{ form.method }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="请求参数：">{{ form.operParam }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="返回参数：">{{ form.jsonResult }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作状态：">
              <div v-if="form.status === 0">正常</div>
              <div v-else-if="form.status === 1">失败</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="操作时间：">{{ parseTime(form.operTime) }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="异常信息：" v-if="form.status === 1">{{ form.errorMsg }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>
    </template>
  </pageContainer>
</template>

<script>

import pageContainer from '../../../components/pageContainer.vue'
import { list, delOperlog, operlogExport } from '@/api/operlog'
import { dict } from '@/utils/dict'

export default {
  components: { pageContainer },
  name: 'Logininfor',
  data() {
    return {
      form: {},
      open: false,
      dict: dict,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 日期范围
      dateRange: [],
      // 默认排序
      defaultSort: { prop: 'loginTime', order: 'descending' },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: undefined,
        operName: undefined,
        status: undefined
      },
      maxHeight: 560
    }
  },
  created() {
    this.getList()
  },
  watch: {

  },
  methods: {
    /** 查询登录日志列表 */
    getList() {
      this.loading = true
      list(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.list = response.rows
        this.total = response.total
        this.loading = false
      }
      )
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm('queryForm')
      this.$refs.tables.sort(this.defaultSort.prop, this.defaultSort.order)
      this.handleQuery()
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.infoId)
      this.multiple = !selection.length
    },
    /** 排序触发事件 */
    handleSortChange(column, prop, order) {
      this.queryParams.orderByColumn = column.prop
      this.queryParams.isAsc = column.order
      this.getList()
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const infoIds = row.operId || this.ids
      this.$confirm('是否确认删除访问编号为"' + infoIds + '"的数据项？').then(function() {
        return delOperlog(infoIds)
      }).then(() => {
        this.queryParams.pageNum = 1
        this.getList()
        this.$message.success('删除成功')
      }).catch(() => {})
    },
    /** 清空按钮操作 */
    // handleClean() {
    //   this.$confirm('是否确认清空所有登录日志数据项？').then(function() {
    //     return cleanLogininfor()
    //   }).then(() => {
    //     this.getList()
    //   }).catch(() => {})
    // },
    /** 导出按钮操作 */
    handleExport() {
      // this.download('monitor/logininfor/export', {
      //   ...this.queryParams
      // }, `logininfor_${new Date().getTime()}.xlsx`)
      operlogExport({ ...this.queryParams }).then(res => {
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
        const a = document.createElement('a')
        const blobUrl = window.URL.createObjectURL(blob)
        a.download = `操作日志${new Date().getTime()}.xlsx`
        a.href = blobUrl
        document.body.appendChild(a)
        // 下载文件
        a.click()
        // 释放内存
        URL.revokeObjectURL(blobUrl)
        document.body.removeChild(a)
      })
    },
    /** 详细按钮操作 */
    handleView(row) {
      this.open = true
      this.form = row
    },
    // 操作日志类型字典翻译
    typeFormat(row, column) {
      return this.selectDictLabel(this.dict.type.sys_oper_type, row.businessType)
    },
    handleSizeChange(val) {
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.contentRole{
  .title{
    display: flex;
    align-items: center;
    height: 30px;
    .line{
      width: 5px;
      height: 25px;
      background: #409EFF;
      margin-right: 5px;
    }
    .text{
      color: #fff;
    }
  }
  .search{
    height: calc(100% - 30px);
    display: flex;
    align-items: center;
    .demo-form-inline{
      padding-left: 10px;
      :deep(.el-form-item){
        margin-bottom: 0;
      }
    }
  }
  .table{
    height: calc(100% - 40px);
    margin-top: 10px;
  }
}
/*最外层透明*/
:deep(.el-table), :deep(.el-table__expanded-cell){
  background-color: transparent;
}
/* 表格内背景颜色 */
:deep(.el-table th),
:deep(.el-table tr),
:deep(.el-table td) {
  background-color: transparent;
  color: #C9E9FF;
  height: 30px;
}
:deep(.el-table thead) {
  color: #7EC1FF;
  font-size: 14px;
}
:deep(.el-table--enable-row-hover){
   background-color: transparent;
}
:deep(.el-table .warning-row) {
 background: rgba(51, 91, 127, 0.6);
}
:deep(.el-table){
  --el-table-border-color: rgba(51, 91, 127, 0.6) !important;

}
:deep(.el-table tbody tr:hover > td) {
            background: rgba(51, 91, 127, 0.4) !important;
        }
   :deep(.el-input__inner){
  background: rgba(51, 91, 127, 1);
  box-shadow:none;
  border:none;
  color: #fff;

}
:deep(.el-pager li){
  background: rgba(51, 91, 127, 1);
  box-shadow:none;
  border:none;
  color: #fff;
}
:deep(.el-pager li.active){
   background: rgb(25, 133, 227);
}
:deep(.btn-prev),:deep(.el-pagination .btn-next){
  background: rgba(51, 91, 127, 1);
  box-shadow:none;
  border:none;
  color: #fff;
}
:deep(.el-pagination button:disabled){
  background: rgba(51, 91, 127, 1);
  box-shadow:none;
  border:none;
  color: #fff;

}
:deep(.el-pagination__total),:deep(.el-pagination__jump){
  color: #fff;
}
:deep(.el-table td.el-table__cell),:deep(.el-table th.el-table__cell.is-leaf){
  border-color: rgba(231,234,241,0.2);
}
:deep(.el-table::before){
  background: rgba(231,234,241,0.2);
}
:deep(.el-form-item__label){
  color: #A3B3BE;
}
:deep(.el-form-item__content){
  color: #fff;
}
:deep(.el-dialog){
  background: rgba(0,28,55,0.85);
}
:deep(.el-dialog__header){
  border-bottom: 1px solid rgba(120, 189, 255, 1);
  margin-right: 0px;
  margin-bottom:10px
}
:deep(.el-dialog__title){
  color: #41B0FF;
  font-size: 16px;
}

:deep(.el-dialog__headerbtn .el-dialog__close){
  color: rgba(70, 174, 255, 1);
}
:deep(.el-range-input){
  background: transparent;
  color: #fff;
}
</style>
